<script>
  import RightToolBar from '@/components/common/right-toolbar';
  import AssignStore from '@/components/store/assign-store';
  import AssignStoreFlow from '@/components/store/assign-store/flow.vue';

  export default {
    layout: 'admin',
    name: 'admin-store-assign-manage',
    components: {
      RightToolBar,
      AssignStore,
      AssignStoreFlow
    },
    data() {
      return {
        // 客户端初始化
        clientInit: true,
        // 商店列表
        storeList: [],
        // 选中商店列表
        storeSelection: [],
        // 商店总数
        totalNum: 0,
        // 商店检索表单显示状态[true-显示 false-隐藏]
        searchFormVisible: true,
        // 商店检索表单对象
        searchForm: {
          // 商店名称
          word: '',
          // 商店所属用户主键
          storeUserId: undefined,
          // 状态
          status: undefined,
          // 当前展示页码
          page: 1,
          // 当前页显示个数
          limit: 10
        },
        // 商店所属用户列表
        userList: [],
        // 状态枚举列表
        statusEnumList: [],
        // 分单方式枚举列表
        assignTypeEnumList: [],
        // 审核员用户列表
        auditUserList: [],
        // 数据加载状态[false-不加载 true-加载]
        dataLoad: false,
        // 按钮禁用状态[true-禁用 false-可用]
        buttonLoad: false
      }
    },
    computed: {

    },
    filters: {
      /**
       * 值向名称映射
       * @param {number} value 值
       * @param {Array<{name, value}>} enumList 枚举列表
       */
      valueFormat(value, enumList) {
        for (let element of enumList) {
          if (element.value === value) {
            return element.name;
          }
        }
        return '';
      }
    },
    async asyncData({ app, params, error }) {
      let searchForm = {
        // 商店名称
        word: '',
        // 商店所属用户主键
        storeUserId: undefined,
        // 状态
        status: undefined,
        // 当前展示页码
        page: 1,
        // 当前页显示个数
        limit: 10
      };
      if (params.searchForm) {
        searchForm = JSON.parse(params.searchForm);
      }
      let res;
      try {
        res = await app.$axios.$post('/assign-store/assignable/page/list', searchForm)
      } catch (e) {
        error(e.msg || '网络异常，请求失败');
        return {};
      }
      const data = res.data;
      return {
        storeList: data.data,
        totalNum: data.totalNum,
        searchForm: searchForm
      }
    },
    created() {
      if (process.client) {
        this.getEnums();

        if (this.clientInit) {
          const params = this.$route.params;
          if (params.searchForm) {
            this.searchForm = JSON.parse(params.searchForm);
          }
          this.getAssignableStorePageList();
        }
      }
    },
    methods: {
      /**
       * 获取枚举数据方法
       */
      getEnums() {
        this.$axios.$get('/assign-store/manage/enums')
          .then(({ data }) => {
            this.userList = data.userList;
            this.statusEnumList = data.statusList;
            this.assignTypeEnumList = data.assignTypeList;
            this.auditUserList = data.auditUserList;
          })
          .catch(() => {});
      },
      /**
       * 商店检索事件
       */
      searchHandle() {
        this.searchForm.page = 1;

        this.getAssignableStorePageList();
      },
      /**
       * 分页获取未分单商店方法
       */
      getAssignableStorePageList() {
        this.dataLoad = true;
        this.$axios.$post('/assign-store/assignable/page/list', this.searchForm)
          .then(({ data }) => {
            this.storeList = data.data;
            this.totalNum = data.totalNum;
          })
          .catch(() => {})
          .finally(() => {
            this.dataLoad = false;
          });
      },
      /**
       * 重置检索表单事件
       */
      resetFormHandle() {
        // 重置表单
        this.$refs.searchForm.resetFields();

        this.searchForm.page = 1;
      },
      /**
       * 每页显示个数变化事件
       * @param {number} size 最新显示个数值
       */
      sizeChangeHandle(size) {
        let searchForm = this.searchForm;
        searchForm.page = 1;
        searchForm.limit = size;
        this.getAssignableStorePageList();
      },
      /**
       * '点击特定页码'、'上一页'、'下一页'操作事件
       * @param {number} index 最新页码
       */
      currentChangeHandle(index) {
        let searchForm = this.searchForm;
        if (searchForm.page === index) {
          return;
        }
        searchForm.page = index;
        this.getAssignableStorePageList();
      },
      /**
       * 商店分单事件
       * @param {Object} store 商店对象
       */
      assignStoreHandle(store) {
        let storeList;
        if (store) {
          storeList = [ store ];
        } else {
          storeList = this.storeSelection;
        }
        // 打开商店审核分单弹出框
        this.$refs.assignStore.initDialog(storeList, this.auditUserList, this.statusEnumList, this.assignTypeEnumList);
      },
      /**
       * 查看商店分单记录事件
       * @param {Object} store 商店对象
       */
      viewAssignStoreFlowHandle(store) {
        this.$refs.assignStoreFlow.initAssignStoreFlowDialog(store);
      }
    }
  }
</script>

<template>
  <div class="s-a-m-p">
    <transition name="el-zoom-in-top">
      <el-form v-show="searchFormVisible" inline size="mini" :model="searchForm" ref="searchForm"
               @keyup.enter.native="searchHandle">
        <el-form-item prop="word" label="商店检索">
          <el-input v-model="searchForm.word" maxlength="30" clearable placeholder="请输入商店名称"></el-input>
        </el-form-item>
        <el-form-item prop="storeUserId">
          <el-select v-model="searchForm.storeUserId" clearable placeholder="请选择商店所属用户">
            <el-option v-for="user in userList" :key="'user' + user.value"
                       :label="user.name" :value="user.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
            <el-option v-for="statusEnum in statusEnumList" :key="'status' + statusEnum.value"
                       :label="statusEnum.name" :value="statusEnum.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="dataLoad" @click="searchHandle" type="primary" icon="el-icon-search">查询</el-button>
          <el-button :disabled="dataLoad" @click="resetFormHandle" plain icon="el-icon-refresh-right">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <div class="tool-box">
      <el-button :disabled="dataLoad || storeSelection.length === 0" @click="assignStoreHandle(undefined)"
                 type="primary" size="mini" plain icon="el-icon-edit">分单</el-button>

      <right-tool-bar :search-visible="searchFormVisible" :search-load="dataLoad"
                      @toggle-search="searchFormVisible = !searchFormVisible" @refresh-table="getAssignableStorePageList" />
    </div>
    <el-table
      v-loading="dataLoad"
      element-loading-text="商店列表加载中..."
      element-loading-spinner="el-icon-loading"
      :data="storeList"
      @selection-change="(list) => this.storeSelection = list"
      ref="storeTable"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="商店名称"></el-table-column>
      <el-table-column prop="userName" header-align="center" align="center" label="所属用户"></el-table-column>
      <el-table-column prop="statusName" header-align="center" align="center" label="商店状态" width="100">
      </el-table-column>
      <el-table-column prop="submitCount" header-align="center" align="center" label="提交次数" width="100">
      </el-table-column>
      <el-table-column prop="submitTime" header-align="center" align="center" label="提交时间" width="135">
      </el-table-column>
      <el-table-column prop="auditUserName" header-align="center" align="center" label="审核员"></el-table-column>
      <el-table-column prop="assignTime" header-align="center" align="center" label="分单时间" width="135"></el-table-column>
      <el-table-column prop="submitTypeName" header-align="center" align="center" label="提交类型" width="100">
      </el-table-column>
      <el-table-column prop="assignTypeName" header-align="center" align="center" label="分单方式" width="100">
      </el-table-column>
      <el-table-column
        header-align="left"
        width="180"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" :disabled="buttonLoad" icon="el-icon-edit" @click="assignStoreHandle(row)">
            分单
          </el-button>
          <el-button type="text" :disabled="buttonLoad" icon="el-icon-thumb" @click="viewAssignStoreFlowHandle(row)">
            分单记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :disabled="dataLoad"
      :current-page="searchForm.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchForm.limit"
      :total="totalNum"
      layout="total, sizes, prev, pager, next, jumper"
      class="paging">
    </el-pagination>

    <!-- 商店审核分单弹出框 -->
    <AssignStore @refresh-table="getAssignableStorePageList" ref="assignStore" />

    <!-- 查看商店分单记录弹出框 -->
    <AssignStoreFlow ref="assignStoreFlow" />
  </div>
</template>

<style scoped>
  .s-a-m-p .tool-box {
    margin-bottom: 7px;
  }
  .s-a-m-p .paging {
    text-align: right;
    margin: 7px;
  }
</style>
